<template>
  <div class="container">
            <n-scrollbar class="leftSide">
                <!--search-->
                <div class="search_chat">
                    <n-input placeholder="搜索">
                      
                    </n-input>
                </div>
                <!--ChatList-->
                <n-spin :show="loading">
                  <div v-for="(letter,index) in letters" :key="index">
                    <div class="chatlist" @click="getother(index)">
                        <div class="block" :class="{active:index === activeClass }">
                            <div class="imgbx">
                                <img :src="letter.target.avatar_url" class="cover">
                            </div>
                            <div class="details">
                                <div class="listHead">
                                    <h4>{{ letter.target.nickname }}</h4>
                                    <p class="time">{{ formatDateTime(letter.conversation.created_at) }}</p>
                                </div>
                                <div class="message_p">
                                    <p>{{ letter.conversation.content }}</p>
                                    <b v-if="letter.unread_count != 0">{{ letter.unread_count }}</b>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </n-spin>
            </n-scrollbar>
 
 
            <div class="rightSide">
                <div class="header">
                    <div class="imgText" v-if="letters.length > 0">
                        <div class="userimg">
                            <img :src="letters[activeClass].target.avatar_url" class="cover">
                        </div>
                        <h4 >{{ letters[activeClass].target.nickname }}<br></h4>
                    </div>
                </div>
                <!--chatbox-->
                <n-scrollbar class="chatBox">
                  <n-spin :show="loading">
                    <div  v-for="(letter,index) in detailLetters" :key="index">
                        <div class="message my_message" v-if="letter.conversation.from_id == userStore.userInfo.id">
                            <p>{{ letter.conversation.content }}<br><span>{{ formatDateTime(letter.conversation.created_at) }}</span> </p>
                            <div class="userimg" style="margin: -10px  0 0 20px;">
                                <img :src="userStore.userInfo.avatar_url" class="cover">
                            </div>
                        </div>
                        <div class="message frnd_message" v-if="letter.conversation.from_id != userStore.userInfo.id">
                            <div class="userimg" style="margin: -10px 20px 0 0 ;">
                                <img :src="letter.target.avatar_url" class="cover">
                            </div>
                            <p>{{ letter.conversation.content }}<br><span>{{ formatDateTime(letter.conversation.created_at) }}</span> </p>
                        </div>
                    </div>
                    <div style="color: #e5ddd5;">
                            <p>太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了太热了<br></p>
                        </div>
                  </n-spin>
                    
                </n-scrollbar>
 
                <!--chat input-->
            <div class="chatbox_input">
                <div style="display:flex; justify-content: space-between;">
                    <n-input type="text"></n-input>
                    <n-button type="info" style="margin: 0 1%;">发送</n-button>
                </div>
                
            </div>
            </div>
            
        </div>

</template>

<script setup>
import { onMounted, ref } from 'vue';
import api from './api'
import { formatDateTime } from '../../utils/common/common'
import { useUserStore } from '@/store'
defineOptions({ name: 'MessagePage' })
const loading = ref(true)
const letterPage = ref({
  pageNo: 1,
  pageSize: 10
})

const letters = ref([])
const activeClass = ref(0)

const detailPage = ref({
  pageNo: 1,
  pageSize: 10
})
const detailLetters = ref([])
const userStore = useUserStore()

onMounted(async () => {
  loading.value = true
  const res = await api.getLetterList(letterPage.value)
  letters.value = res.data.conversations
  if (res.data.conversations.length > 0) {
      // 查询第一条会话详情
      getConversations(res.data.conversations[0].target.id,userStore.userInfo.id)
  }
  loading.value = false
})

function getother(index) {
    activeClass.value = index;
    getConversations(letters.value[index].target.id,userStore.userInfo.id)
}

async function  getConversations(id1, id2) {
    let conversationId = ""
      if (id1 < id2) {
        conversationId = id1 + '_' + id2
      } else {
        conversationId = id2 + '_' +  id1
      }
      const de =  await api.getConversationDetail(detailPage.value, conversationId)
    detailLetters.value = de.data.conversations
    letters.value[activeClass.value].unread_count = de.data.unread_count
}
</script>

<style>
.container
{
    position: relative;
    width: 100%;
    height: 100%;    
    background:#fff;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.06),0 2px 5px 0 rgba(0,0,0,0.06);
    display: flex;
}
.container .leftSide
{
    position: relative;
    flex:30%;
    background:#fff;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.container .rightside
{
    position: relative;
    flex: 70%;
    background:#e5ddd5;
    overflow-y: scroll;
}
.container .rightside::before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:url(img6-bg.jpg) ;
    opacity: 0.06;
}
.header
{
    position: relative;
    width: 100%;
    height: 12%;
    background: #ededed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}
.userimg
{
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    cursor: pointer;
}
.userimg_r
{
  margin: -10px 0 1px 20px;
}
.userimg_l
{
  margin: -10px 20px 1px 0;
}
.cover
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav_icons
{
    display: flex;
}
.nav_icons li
{
    display: flex;
    list-style: none;
    cursor: pointer;
    color: #51585c;
    font-size: 1.5em;
    margin-left: 22px;
}
.search_chat
{
    position: relative;
    width: 100%;
    height: 12%;
    background: #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}
.search_chat div
{
    width: 100%;
}
.search_chat div input
{
    width:100%;
    outline: none;
    border: none;
    background: #fff;
    padding: 6px;
    height: 38px;
    border-radius: 30px;
    font-size: 14px;
    padding-left: 40px;
}
.search_chat div input::placeholder
{
    color: #bbb;
}
.search_chat div img
{
    position: absolute;
    left: 30px;
    top: 14px;
    font-size: 1.5em;
}
.chatlist
{
    position: relative;
    height: calc(100%-110px);
    overflow-y: auto;
}
.chatlist .block
{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.chatlist .block.active{
    background: #ebebeb;
}
.chatlist .block:hover
{
    background:#f5f5f5;
}
.chatlist .block .imgbx
{
    position: relative;
    min-width: 45px;
    height: 45px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 10px;
}
.chatlist .block .details
{
    position: relative;
    width: 100%;
}
.chatlist .block .details .listHead
{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.chatlist .block .details .listHead h4
{
    font-size: 1.1em;
    font-weight: 600;
    color: #111;
}
.chatlist .block .details .listHead .time
{
    font-size: 0.75em;
    color: #aaa;
}
.chatlist .block .details .listHead .time
{
    color: #111;
}
 
.message_p
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.message_p p
{
    color: #aaa;
    display: -webkit-box;
    /* -webkit-line-break: 1; */
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message_p b
{
    background-color: red;
    color: #fff;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75em;
}
.imgText
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgText h4
{
    font-weight: 500;
    line-height: 1.2em;
    margin-left: 15px;
}
.imgText h4 span
{
    font-size: 0.8em;
    color: #555;
}
.chatBox
{
    position: relative;
    width: 100%;
    height: 73%;
    padding: 10px;
    /* overflow-y: auto; */
    background-color: #e5ddd5;
}
.message
{
    position: relative;
    display: flex;
    width: 100%;
    margin: 15px 0;
}
.message p
{
    position: relative;
    right: 0;
    text-align: right;
    max-width: 65%;
    padding: 12px;
    background: #dcf8c6;
    border-radius: 10px;
    font-size: 0.9em;
}
.message p::before
{
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg,#dcf8c6 0%,#dcf8c6 50%,transparent 50%,transparent);
}
.message p span
{
    display: block;
    margin-top: 5px;
    font-size: 0.85em;
    opacity: 0.5;
}
.my_message
{
    justify-content: flex-end;
}
.frnd_message
{
    justify-content: flex-start;
}
.frnd_message p
{
    background: #fff;
    text-align: left;
}
.message.frnd_message p::before
{
    content: '';
    position: absolute;
    top: 0;
    left: -12px;
    width: 20px;
    height: 20px;
    background: linear-gradient(225deg,#fff 0%,#fff 50%,transparent 50%,transparent);
}
.chatbox_input
{
    position: relative;
    width: 100%;
    height: 15%;
    background: #f0f0f0;
    padding: 15px;
    justify-content: space-between;
    align-items: center;
}
.chatbox_input input
{
    position: relative;
    width: 90%;
    height: 100%;
    padding: 10px 20px;
    border: none;
    outline: none;
    border-radius: 10px;
    font-size: 1em;
}
</style>